<template>
    <div class="detail">
        <product-param v-bind:title="product.title" v-bind:id="product.id"></product-param>
        <div class="wrapper">
            <div class="container clearfix">
                <div class="swiper">
                    <swiper :options="swiperOption" ref="swiperOption">
                        <swiper-slide v-for="(item, index) in swipers" :key="index">
                            <img v-lazy="item" alt="">
                        </swiper-slide>
                        <div class="swiper-pagination"  slot="pagination"></div>
                        <div class="swiper-button-prev" slot="button-prev"></div>
                        <div class="swiper-button-next" slot="button-next"></div>
                    </swiper>
                </div>
                <div class="content">
                    <h2 class="item-title">{{product.title}}</h2>
                    <p class="item-info">{{product.promotion_title}}</p>
                    <div class="delivery">小米自营</div>
                    <div class="item-price">{{product.price}}元<span class="del">{{product.cost_price}}元</span></div>
                    <div class="line"></div>
                    <div class="item-addr">
                        <i class="icon-loc"></i>
                        <div class="addr">北京 北京市 朝阳区 安定门街道</div>
                        <div class="stock">有现货</div>
                    </div>
                    <div class="item-version clearfix" v-for="(item, index) in sku" :key="index">
                        <h2>选择{{item.name}}</h2>
                        <div class="specs-item">
                            <div class="phone fl" v-for="(val, k) in item.list" :key="k" @click="checkValue(index,val.id)" :class="{'checked':val.flag==1}">
                                {{val.name}}
                            </div>
                        </div>
                    </div>
                    <div class="item-total">
                        <div class="phone-info ">
                            <div class="fl">{{product.title}} {{skuValue}}</div>
                            <div class="fr">{{product.price}}元 <del>{{product.cost_price}}元 </del></div>
                        </div>
                        <div class="phone-total">总计：{{product.price}}元
                       </div>
                    </div>
                    <div class="btn-group">
                        <a href="javascript:;" style="margin-bottom: 10px;" class="btn btn-big fl" @click="addCart">加入购物车</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="price-info">
            <div class="container">
                <h2>价格说明</h2>
                <div class="desc">
                    <img src="/imgs/detail/item-price.jpeg" alt="">
                </div>
            </div>
        </div>
        <service-bar></service-bar>
    </div>
</template>
<script>
    import { swiper, swiperSlide } from 'vue-awesome-swiper';
    import 'swiper/dist/css/swiper.css';
    import ProductParam from './../components/ProductParam'
    import ServiceBar from './../components/ServiceBar';
    import {mapState} from 'vuex'
    export default{
        name:'detail',
        data(){
            return {
                id: this.$route.params.id,//获取商品ID
                err: '',
                skuValue: "",//已选的属性值
                product: {},//商品信息
                sku: [],
                skus: [],
                checkedIds: [],
                swiperOption: {
                    cubeEffect: {
                        shadowOffset: 100,
                        shadowScale: 0.6
                    },
                    pagination: {
                        el: '.swiper-pagination',
                        clickable:true
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    }
                },
                swipers: [],
                buyNum: 1
            }
        },
        components:{
            swiper,
            swiperSlide,
            ProductParam,
            ServiceBar
        },
        computed: {
            ...mapState(['username','cartCount'])
        },
        mounted(){
            this.getProductInfo(this.id);
        },
        methods:{
            getProductInfo(id){
                this.http.get(`/api/goods/detail/${id}`).then((res)=>{
                    this.product = res.result
                    this.swipers = res.result.image
                    this.product = res.result
                    this.sku = res.result.sku
                    this.skus = res.result.gids
                    let obj = res.result.gids
                    this.skuValue = this.getSpecsValue(res.result.sku)
                    for(var key in obj){
                        if(obj[key]==this.id){
                            this.checkedIds = key.split(',')
                        }
                    }
                })
            },
            checkValue(index, id) {
                if (this.checkedIds[index] == id) {
                    return
                }
                this.checkedIds[index] = id
                //获取skuID
                this.checkedIds.toString()
                let skuIid = this.skus[this.checkedIds.toString()]
                this.id = skuIid
                this.getProductInfo(skuIid)
            },
            getSpecsValue(obj) {
                // eslint-disable-next-line no-unused-vars
                let specs = ''
                obj.forEach(function (v) {
                    v.list.forEach(function (v1) {
                        if (v1.flag == 1) {
                            specs += '[' + v1.name + '] '
                        }

                    })
                })
                return specs
            },
            addCart(){
                if (this.$store.state.username){
                    let data = {
                        id: this.id,
                        num: this.buyNum
                    }
                    this.http.post('/api/cart/add', data).then((res)=> {
                        if (res.status > 0) {
                            this.message.error(res.message)
                            return;
                        }

                        this.$store.dispatch('getCartCount', this.buyNum + this.cartCount);
                        this.message.success('加入购物车成功')
                        return;

                    })
                } else {
                    this.message.error('没有登录的业务处理')
                }
            }
        }
    }
</script>
<style lang="scss">
    @import './../assets/scss/mixin.scss';
    .detail{
        .wrapper {
            .container {
                display: flex;
                width:1226px;
                margin-right:auto;
                margin-left:auto;
                .swiper {
                    width:642px;
                    height:617px;
                    margin-top:5px;
                    img{
                        width:100%;
                        height:100%;
                    }
                }
            }
            .content{
                width:584px;
                .item-title{
                    font-size:28px;
                    padding-top:30px;
                    padding-bottom:16px;
                    height: 26px;
                }
                .item-info{
                    font-size:14px;
                    color: #999999;
                }
                .delivery{
                    font-size:16px;
                    color:#FF6700;
                    margin-top:26px;
                    margin-bottom:14px;
                    height: 15px;
                }
                .item-price{
                    font-size:20px;
                    color:#FF6700;
                    height: 19px;
                    .del{
                        font-size:16px;
                        color:#999999;
                        margin-left:10px;
                        text-decoration:line-through;
                    }
                }
                .line{
                    height:0;
                    margin-top:25px;
                    margin-bottom:28px;
                    border-top:1px solid #E5E5E5;
                }
                .item-addr{
                    height:108px;
                    background-color:#FAFAFA;
                    border:1px solid #E5E5E5;
                    box-sizing:border-box;
                    padding-top:31px;
                    padding-left:64px;
                    font-size:14px;
                    line-height:14px;
                    position:relative;
                    .icon-loc{
                        position: absolute;
                        top: 27px;
                        left: 34px;
                        @include bgImg(20px,20px,'/imgs/detail/icon-loc.png');
                    }
                    .addr{
                        color:#666666;
                    }
                    .stock{
                        margin-top:15px;
                        color:#FF6700;
                    }
                }
                .item-version,.item-color{
                    margin-top:30px;
                    .specs-item {
                        display: flex;
                        display: -webkit-flex;
                        justify-content: space-between;
                        flex-direction: row;
                        flex-wrap: wrap;
                        .phone{
                            width:287px;
                            height:50px;
                            line-height:50px;
                            font-size:16px;
                            color:#333333;
                            border:1px solid #E5E5E5;
                            box-sizing: border-box;
                            text-align:center;
                            cursor:pointer;
                            margin-top: 8px;
                            span{
                                color:#666666;
                                margin-left:15px;
                            }
                            .color{
                                display:inline-block;
                                width:14px;
                                height:14px;
                                background-color:#666666;
                            }
                            &.checked{
                                border:1px solid #FF6600;
                                color:#FF6600;
                            }
                        }
                    }
                    h2{
                        font-size:18px;
                        margin-bottom:20px;
                    }
                }
                .item-total{
                    height: 108px;
                    background: #FAFAFA;
                    padding: 24px 33px 29px 30px;
                    font-size: 14px;
                    margin-top:50px;
                    margin-bottom:30px;
                    box-sizing: border-box;
                    .phone-info {
                        display: flex;
                        justify-content: space-between;
                    }
                    .phone-total{
                        font-size: 24px;
                        color: #FF6600;
                        margin-top: 18px;
                    }
                }
            }
        }
        .price-info{
            background-color:#F3F3F3;
            height:340px;
            .container {
                width:1226px;
                margin-right:auto;
                margin-left:auto;
                h2{
                    font-size:24px;
                    color:#333333;
                    padding-top:38px;
                    margin-bottom:30px;
                }
            }

        }
    }

</style>